<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import {
  Upload,
  Delete,
  Download,
  Plus,
  ZoomIn,
  VideoPause,
  VideoPlay,
} from '@element-plus/icons-vue';
import {
  hanldeUploadFile,
  uploadSignleFile,
  uploadFileList,
  pauseUpload,
  resumeUpload,
  cancelSingle,
  cancelAll,
} from '@/hooks/chunksUpload';
import UploadItem from '@/components/UploadItem.vue';
import type { UploadFile } from 'element-plus';

const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const disabled = ref(false);
// const uploadFileList: any = ref([]); // 上传文件列表:

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const statistics = computed(() => {
  // 正在上传的文件个数 / 上传总数
  const otherArr = uploadFileList.value.filter((item: any) => item.state !== 4);
  return `${otherArr.length}/${uploadFileList.value.length}`;
});
</script>

<template>
  <div class="card-module">
    <div class="page_top">
      <p>正在上传 ({{ statistics }})</p>
      <div
        class="page_top_right"
        :style="{
          'justify-content': uploadFileList.length > 1 ? 'space-between' : 'flex-end',
        }"
      >
        <p class="clear_btn" @click="cancelAll" v-if="uploadFileList.length > 1">全部取消</p>
      </div>
    </div>
    <div class="content" v-if="uploadFileList.length">
      <UploadItem
        :uploadFileList="uploadFileList"
        @pauseUpload="pauseUpload"
        @resumeUpload="resumeUpload"
        @cancelSingle="cancelSingle"
      />
    </div>

    <div class="bottom_box">
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        multiple
        :on-change="hanldeUploadFile"
      >
        <el-icon><Upload /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />

            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <el-icon><ZoomIn /></el-icon>
              </span>
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <el-icon><VideoPause /></el-icon>
              </span>
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <el-icon><VideoPlay /></el-icon>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <el-icon><Delete /></el-icon>
              </span>
            </span>
            <div class="percentage_box" :style="{ width: `${file.percentage}%` }"></div>
            <div class="percentage_box_span">
              <span>{{ Math.floor(file.percentage) }}%</span>
            </div>
          </div>
        </template>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list_item {
  margin: 0 10px 20px 10px;
  display: flex;
  transition: all 1s;
}
.percentage_bac {
  height: 20px;
  width: 100%;
  border-radius: 8px;
  background-color: #1b1f24;
  margin: 10px 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) inset;
  position: relative;
  overflow: hidden;
}
.percentage_box {
  height: 100%;
  transition: all 0.1s;
  background-color: #73c944;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.percentage_box_span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #e1eae2;
  height: 20px;
  line-height: 20px;
}
.left_box {
  flex: 1;
  margin: 10px 0;
  font-size: 14px;
}
.left_box_percentage {
  flex: 1;
  margin: 0 10px;
}
.left_box_fileName {
  margin: 0 10px;
  font-weight: bold;
  font-size: 18px;
}
.rightBtn {
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  flex-basis: 180px;
  margin-top: -24px;
}
.my_btn {
  padding: 2px 10px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  cursor: pointer;
  margin: 10px 8px;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  min-width: 48px;
}
.my_btn:hover {
  opacity: 1;
}
.blueBtn {
  background-color: #409eff;
}
.redBtn {
  background-color: #f56c6c;
}
.bottom_hint {
  opacity: 0.8;
  display: flex;
  align-items: center;
}
</style>
